<template>
  <div class="menu-container">
    <RouterLink :to="item.url" v-for="(item, index) in menu" :key="index">
      <div class="menu-item" :class="{ 'menu-active': menuActive == index }">
        <div class="menu-icon"><xyIcon :type="item.icon"></xyIcon></div>
        {{ item.title }}
      </div></RouterLink
    >
  </div>
</template>

<script>
import xyIcon from '@/components/xyIcon.vue'
export default {
  components: {
    xyIcon,
  },
  props: {
    menu: {
      type: Array,
      default: Array,
    },
    menuActive: {
      type: Number,
      default: 0,
    },
  },
}
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
}
.menu-item {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  color: #999;
  cursor: pointer;
  font-size: 16px;
}
.menu-item:hover,
.menu-active {
  color: #fff;
  background-color: rgba(240, 240, 240, 0.1);
}
.menu-icon {
  margin-left: 50px;
  margin-right: 5px;
  width: 20px;
}
</style>
